<template>
  <!-- 报价列表 -->
  <scroll-view :scroll-top="carListScrollTop" scroll-y class="car-lists-r" @scrolltolower="onScrolltoLower">
    <template v-if="list.length > 0">
      <!-- 报价信息 -->
      <view class="rent-car-item" v-for="(item, index) in visibleList" :key="index">
        <RentCarPriceItem
          :item="item"
          :basicParam="basicParam"
          @bookModel="onBookModelClick(item)"
        />
      </view>
    </template>
    <template v-if="!list.length">
      <u-empty
        text="没有搜索结果"
        class="empty"
        mode="search"
      ></u-empty>
    </template>
  </scroll-view>
</template>

<script>
import RentCarPriceItem from "./rentCarPriceItem.vue";

export default {
  data() {
    return {
      // 报价列表滚动位置
      carListScrollTop: 0,
      list: [],

      visiblePages: [1, 2],
      visibleList: [],
      // 单页加载数量
      pageSize: 10,
      // 最大页码
      maxPageNumber: 1,
    };
  },
  props: {
    basicParam: {
      type: Object,
      default: () => {},
    }
  },
  components: {
    RentCarPriceItem,
  },
  methods: {
    getVisibleList() {
      let visiblePages = this.visiblePages
      console.log('当前加载页码', this.visiblePages.join(','))
      return this.list.filter(item => visiblePages.includes(item.page))
    },
    // 将数据进行分组处理
    initData(list) {
      const tempList = [...list]
      let maxPageNumber = 1
      tempList.forEach((item,index) => {
        const order = index + 1
        const page = Math.ceil(order / this.pageSize)
        item.page = page
        page > maxPageNumber ? maxPageNumber = page : ''
      });
      this.maxPageNumber = maxPageNumber
      console.log('数据总量', tempList.length, '最大页码', this.maxPageNumber)

      this.list = tempList
      this.visiblePages = [1]
      this.visibleList = this.getVisibleList()
      // 滚动到顶部
      this.carListScrollTop = -1
      this.$nextTick(() => {
        this.carListScrollTop = 0
      })
    },
    onScrolltoLower() {
      const lastPageNumber = this.visiblePages[this.visiblePages.length - 1]
      if (lastPageNumber < this.maxPageNumber) {
        this.visiblePages.push(lastPageNumber + 1)
        this.visibleList = this.getVisibleList()
      }
    },
    // 预订
    onBookModelClick(item) {
      const itemId = item.itemId;
      const pickUpCarType = item.pickUpCarType;
      const pickUpCarTypeName = item.pickUpCarTypeName;
      const url = `/pages/itemDetail?id=${encodeURIComponent(
        itemId
      )}&pickUpCarType=${pickUpCarType}&pickUpCarTypeName=${pickUpCarTypeName}`;
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.car-lists-r {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  white-space: nowrap;
}
.empty {
  position: absolute;
  left: 50%;
  top: 128px;
  transform: translateX(-50%);
}
</style>
